// var p_desc
// window.onload = function() {
// 	p_desc = CKEDITOR.replace('description');
// };
//
// function con() {
// 	console.log(p_desc.getData())
// }

function showHtml(id) {
    vm.showHtml = true
    console.log()
    vm.getInfo(id)
}

$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'course/coursesmall/list',
        datatype: "json",
        colModel: [{
            label: 'id',
            name: 'id',
            index: 'id',
            width: 50,
            key: true,
            hidden: true
        },
            {
                label: '标题',
                name: 'title',
                index: 'title',
                width: 80
            },
            {
                label: '封面',
                name: 'coverPath',
                index: 'cover_path',
                width: 80,
                formatter: function (data) {
                    return `<img src="${data}" style="height: 40px;width: 40px"></img>`;

                }
            },
            {
                label: '音视频',
                name: 'type',
                index: 'type',
                width: 80,
                formatter: function (data) {
                    if (data == 0) return '<label class="label label-default">视频</label>'
                    if (data == 1) return '<label class="label label-default">音频</label>'
                }
            },
            {
                label: '数据地址',
                name: 'videoPath',
                index: 'video_path',
                width: 80
            },
            {
                label: '简介',
                name: 'introduce',
                index: 'introduce',
                width: 100
            },
            {
                label: '上下线',
                name: 'isOnline',
                index: 'is_online',
                width: 80,
                /*formatter: function (data,row) {
                    if(data==0) return '<label class="label label-success" onclick="online(${row.rowId})">已上线</label>'
                    if(data==1) return '<label class="label label-default" onclick="upline(${row.rowId})>未上线</label>'
                }*/

                formatter: function (data, row) {
                    var html;
                    if (data == 0) {
                        html = ` <button class="btn btn-primary" onclick="online(${row.rowId})"></i>&nbsp;已上线</button>`
                    } else {
                        html = ` <button class="btn btn-success"onclick="upline(${row.rowId})"></i>&nbsp;未上线</button>`

                    }
                    return html;

                }
            },
            // { label: '所属老师的id', name: 'teacherId', index: 'teacher_id', width: 80 },
            {
                label: '创建时间',
                name: 'createTime',
                index: 'create_time',
                width: 80
            },
            {
                label: '图片内容地址',
                name: 'picturePath',
                index: 'picture_path',
                width: 80,
                formatter: function (value, options, row) {
                    // $("#showHtml").html(data)
                    return '<button class="btn btn-default" onclick="showHtml(' + row.id + ')" >详情</button>';

                }
            }
        ],
        viewrecords: true,
        height: 385,
        rowNum: 10,
        rowList: [10, 30, 50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({
                "overflow-x": "hidden"
            });
        }
    });

    new AjaxUpload('#upload', {
        action: baseURL + "course/teacher/upload",
        name: 'file',
        autoSubmit: true,
        responseType: "json",
        onSubmit: function (file, extension) {
            if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                alert('只支持jpg、png、gif格式的图片！');
                return false;
            }
        },
        onComplete: function (file, r) {
            if (r.code == 0) {

                $("#pic").attr('src', r.returnUrl);
                vm.courseSmall.coverPath = r.returnUrl
                console.log(vm.courseSmall.coverPath)
            } else {
                alert(r.msg);
            }
        }
    });

});

//todo 模糊查询微课程
function getCourseSmallLike() {
    var courseSmallName = $("findCourseSmall").val()
    if (null == courseSmallName || "" == courseSmallName) {
        alert("查询关键字不能为空")
        return
    } else {
        $.ajax({
            url: baseURL + "course/coursesmall/getCourseSmallLike",
            type: "POST",
            contentType: "json",
            data: {
                courseSmallName
            },
            success: function (r) {

            }
        })
    }

}

function online(id) {
    onlineWindow(id, 1, "确认要下架么？")
}

function upline(id) {
    onlineWindow(id, 0, "确认要上线么？")
}

function onlineWindow(id, isOnline, msg) {
    var data = {
        id: id,
        isOnline: isOnline
    }

    confirm(msg, function () {
        $.ajax({
            type: "POST",
            url: baseURL + "course/coursesmall/online",
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (r) {
                vm.reload()
                console.log(r)
                alert("操作成功")
            }
        });
    });
}

var vm = new Vue({
    el: '#rrapp',
    data: {
        showList: true,
        showHtml: false,
        title: null,
        courseSmall: {
            classificationName: "分类",
            classificationId: null,
        },
        courseSmallName: null,
        courseSmallClassificationFirstId: 0,
        courseSmallClassificationFirst: {},
        courseSmallClassificationSecondId: 0,
        courseSmallClassificationSecond: {},
        courseSmallClassificationThirdId: 0,
        courseSmallClassificationThird: {},
    },
    mounted() {
        this.getCourseSmallClassificationFirst(this.courseSmallClassificationFirstId)
    },
    methods: {
        getCourseSmallClassificationFirst: function (id) {
            $.ajax({
                type: "GET",
                url: baseURL + "course/courseSmallClassification/getCourseSmallClassification?id=" + id,
                contentType: "application/json",
                success: function (r) {
                    if (r.code === 0) {
                        console.log(r)
                        if (r.data[0].childClassificationList.size != 0) {
                            vm.courseSmallClassificationFirst = r.data[0].childClassificationList
                        }
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        getCourseSmallClassificationSecond: function () {
            $.ajax({
                type: "GET",
                url: baseURL + "course/courseSmallClassification/getCourseSmallClassification?id=" + vm.courseSmallClassificationFirstId,
                contentType: "application/json",
                success: function (r) {
                    if (r.code === 0) {
                        console.log(r)
                        vm.courseSmallClassificationSecond = r.data
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        getCourseSmallClassificationThird: function () {
            $.ajax({
                type: "GET",
                url: baseURL + "course/courseSmallClassification/getCourseSmallClassification?id=" + vm.courseSmallClassificationSecondId,
                contentType: "application/json",
                success: function (r) {
                    if (r.code === 0) {
                        vm.courseSmallClassificationThird = r.data
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        setCourseSmallClassificationId: function () {
            var myselect = document.getElementById("message-textSmall");
            var index = myselect.selectedIndex
            vm.courseSmall.classificationName = myselect.options[index].text;
            vm.courseSmall.classificationId = vm.courseSmallClassificationThirdId
            console.log(vm.courseSmall.classificationName, vm.courseSmall.classificationId)
        },
        query: function () {
            vm.reload();
        },
        add: function () {
            vm.showList = false;
            vm.title = "新增";
            vm.courseSmall = {
                classificationId: null,
                classificationName: null
            };
        },
        update: function (event) {
            var id = getSelectedRow();
            if (id == null) {
                return;
            }
            vm.showList = false;
            vm.title = "修改";

            vm.getInfo(id)
        },

        saveOrUpdate: function (event) {
            var url = vm.courseSmall.id == null ? "course/coursesmall/save" : "course/coursesmall/update";
            // vm.courseSmall.picturePath = window.btoa(p_desc.getData());

            if (vm.courseSmall.title == null || vm.courseSmall.title == undefined || vm.courseSmall.title === '') {
                alert('必需输入标题！', function (index) {

                });
            } else if (vm.courseSmall.coverPath == null || vm.courseSmall.coverPath == undefined || vm.courseSmall.coverPath === '') {
                alert('必需上传封面！', function (index) {

                });
            } else if (vm.courseSmall.type == null || vm.courseSmall.type == undefined || vm.courseSmall.type === '') {
                alert('必需选择课程文件类型！（音频还是视频）', function (index) {

                });
            } else if (vm.courseSmall.videoPath == null || vm.courseSmall.videoPath == undefined || vm.courseSmall.videoPath === '') {
                alert('必需输入数据文件地址！', function (index) {

                });
            } else if (vm.courseSmall.introduce == null || vm.courseSmall.introduce == undefined || vm.courseSmall.introduce === '') {
                alert('必需输入课程简介！', function (index) {

                });
            }
            // else if (vm.courseSmall.picturePath == null || vm.courseSmall.picturePath == undefined || vm.courseSmall.picturePath == '') {
            //     alert('必需输入PDF文件地址！', function (index) {
            //
            //     });
            // }
            else {
                $.ajax({
                    type: "POST",
                    url: baseURL + url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.courseSmall),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功', function (index) {
                                vm.reload();
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            }
        },
        del: function (event) {
            var ids = getSelectedRows();
            if (ids == null) {
                return;
            }

            confirm('确定要删除选中的记录？', function () {
                $.ajax({
                    type: "POST",
                    url: baseURL + "course/coursesmall/delete",
                    contentType: "application/json",
                    data: JSON.stringify(ids),
                    success: function (r) {
                        if (r.code == 0) {
                            alert('操作成功', function (index) {
                                $("#jqGrid").trigger("reloadGrid");
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        },
        getInfo: function (id) {
            $.get(baseURL + "course/coursesmall/info/" + id, function (r) {
                vm.courseSmall = r.courseSmall;
                $("#showHtml").html(r.courseSmall.picturePath)
                // p_desc.setData(r.courseSmall.picturePath)
            })
        },
        reload: function (event) {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                page: page
            }).trigger("reloadGrid");
        }
    }
});